import React from 'react'
import { Table, Divider ,Input, message} from 'antd';


 class SelfModal extends React.Component<any,any>{
   constructor(props:any){
     super(props)
      this.state={
         data:[{key:'1',id:'1',resourceName:'',resourcePath:'',requestType:''}],
         unm:1,
      }
   }
   public componentWillReceiveProps(nextProps){
    this.props.getChildValue(this.state.data)
   }
   componentDidMount(){
     const {setData} = this.props
     if(setData){
     setData.map((item,index)=>{
       item.key = index+1
       item.id =  index+1
     })
    //  console.log(setData);
     this.setState({data:setData})
    }
   }
   handeladd(e){
     console.log(e);
    //  const {data,unm} =this.state
      this.setState({
         unm:this.state.data.length+1
      },()=>{
        let arr = {
          key:this.state.unm.toString(),
          id: this.state.unm.toString(),
          resourceName:'',
          resourcePath: '',
          requestType:''
      }
      this.setState({data:this.state.data.concat(arr)})
      })
   }
   inputVale(record,e){ //资源名称
     const {data} = this.state
    data.map((item,index)=>{
      if(item.key==record.key){
        data[index].resourceName= e.target.value
        this.setState({data})
      }
    })
   }
   resinutValue(record,e){ //资源路径
    const {data} = this.state
    data.map((item,index)=>{
      if(item.key==record.key){
        data[index].resourcePath= e.target.value
        this.setState({data})
      }
    })
   }

   requstValue(record,e){ //请求方式
    const {data} = this.state
    data.map((item,index)=>{
      if(item.key==record.key){
        data[index].requestType= e.target.value
        this.setState({data})
      }
    })
   }
   handelDelite(record,e){ //删除
      const {data} =this.state
      console.log(data);
      if(data.length>1){
        let arr = data.filter((item,index)=>item.key!=e.target.id)
        this.setState({data:arr})
      }else{
        message.error('不能再删除了！')
      }

   }


render(){
  const {data} =this.state
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      render:(text,redern,index)=>index+1
    },
    {
      title: '资源名称',
      dataIndex: 'resourceName',
      key: 'resourceName',
      render: (text, record):any=>{
        return <Input placeholder="请输入资源名称" value={data[record.key-1]?data[record.key-1].resourceName:''} 
         onChange={this.inputVale.bind(this,record)} 
         disabled={this.props.disabled}
        />
      },
    },
    {
      title: '资源路径',
      dataIndex: 'resourcePath',
      key: 'resourcePath',
      render: (text,record):any=>{
        return <Input placeholder="请输入资源路径" value={data[record.key-1]?data[record.key-1].resourcePath:''} 
        onChange={this.resinutValue.bind(this,record)} 
        disabled={this.props.disabled}
        />
      },
    },
    {
      title: '请求方式',
      key: 'requestType',
      dataIndex: 'requestType',
      render: (text,record):any=>{
        return <Input placeholder="请输入请求方式" value={data[record.key-1]?data[record.key-1].requestType:''} 
        onChange={this.requstValue.bind(this,record)} 
        disabled={this.props.disabled}
        />
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => {
        if(this.props.disabled){
          return (
            <span></span>
           )
        }else{
          return (
            <span>
              <a onClick={this.handeladd.bind(this,record)}>添加</a>
              <Divider type="vertical" />
              <a onClick={this.handelDelite.bind(this,record)} id={record.key}>删除</a>
            </span>
           )
        }

      },
    },
  ];
   return (
    <>
       <Table columns={columns} dataSource={this.state.data} />
    </>
   )
    }
}



export default SelfModal